<template>
  <div style="width: 800px;height: 500px;margin: 0 auto;position: relative;">
    <div id="mountNode"></div>
  </div>
</template>

<script>
/**
 * (1 对象风格
 * (2 线的风格
 * (3 性能
 * (4 布局效果
 * (5 图例
 * (6 缩略图
 * (7 tooltip提示
 * (8 对象收起后自动布局
*/
import G6 from '@antv/g6'
export default {
  name: 'ViewGraph',
  data () {
    return {
      // 点集
      nodes: [
        {
          id: 'node1', // String，该节点存在则必须，节点的唯一标识
          label: 1
        },
        {
          id: 'node2', // String，该节点存在则必须，节点的唯一标识
          label: 2
        }
      ],
      // 边集
      edges: [
        {
          source: 'node1', // String，必须，起始点 id
          target: 'node2'  // String，必须，目标点 id
        }
      ],
      graph: null
    }
  },
  mounted () {
    this.initGraph()
  },
  methods: {
    initGraph () {
      this.graph = new G6.Graph({
        container: 'mountNode',
        width: 800,
        height: 500,
        modes: {
          default: [
            {
              type: 'tooltip',
              formatText: function formatText(model) {
                const text = 'name: ' + model.label
                return text
              }
            }
          ]
        }
      })
      this.graph.data({nodes: this.nodes, edges: this.edges})
      this.graph.render()
    }
  }
}
</script>

<style lang="less" scoped>
/deep/.g6-tooltip {
  border: 1px solid #e2e2e2;
  border-radius: 4px;
  font-size: 12px;
  color: #545454;
  background-color: rgba(255, 255, 255, 0.9);
  padding: 10px 8px;
  box-shadow: rgb(174, 174, 174) 0px 0px 10px;
}
</style>